<!DOCTYPE html>
<html lang="en">
  <head>
    <meta
      charset="UTF-8"
      content="width=device-width, minimum-scale=1.0,initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
      id="viewport"
      name="viewport"
    />
    <title>Title</title>
    <link href="reset.css" rel="stylesheet" />
    <link href="iconfont/iconfont.css" rel="stylesheet" />
    <link href="less/style.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <div class="com-header-area">
      <div class="search-box">
        <span class="iconfont icon-fangdajing"></span>
        <input
          type="text"
          placeholder="书名、作者、出版社、ISBN、文具"
          value=""
        />
      </div>
    </div>

    <div class="com-content">
      <div class="hot-search">
        <ul>
          <li><span class="hot">热门搜索：</span></li>
          <li><a>高等数学</a></li>
          <li><a>高等数学</a></li>
          <li><a>高等数学</a></li>
          <li><a>高等数学</a></li>
        </ul>
      </div>

      <div class="slide">
        <img src="img/slide.jpg">
      </div>

      <div class="guarantee-g">
        <span class="guarantee-span"><span class="check">√</span>保证正品</span>
        <span class="guarantee-span"><span class="check">√</span>保证低价</span>
        <span class="guarantee-span"><span class="check">√</span>24小时发货</span>
        <span class="guarantee-span"><span class="check">√</span>无理由退货</span>
      </div>

      <div class="tab">
        <a href="#"><img src="img/classify.jpg">分类搜索</a>
        <a href="#"><img src="img/classify.jpg">分类搜索</a>
        <a href="#"><img src="img/classify.jpg">分类搜索</a>
        <a href="#"><img src="img/classify.jpg">分类搜索</a>
        <a href="#"><img src="img/classify.jpg">分类搜索</a>
      </div>

      <div class="bookList">
        <div>
          <a href="#"><img style="width:100%;" src="img/ico_index.gif"></a>
        </div>
        <div class="book-items">
          <div class="item">
            <span class=book_recommend>推荐图书</span>
            <span class="left-arrow">您喜欢的都在这里</span>
            <a class="span-more">更多</a>
          </div>
          
          <div class="list-recommend">
            <ul>
              <li>
                <a href="#">
                  <div class="book-img">
                    <img alt="阿弥陀佛么么哒" src="img/book.jpg">
                  </div>
                  <div class="bookName nape">阿弥陀佛么么哒</div>
                  <div class="price nape cost">
                    <span>有路价 ￥15.00</span>
                  </div>
                  <div class="priceVip nape cost">
                    <span>VIP价 ￥14.30</span>
                  </div>
                </a>
              </li>
              <li><a href="#">
                  <div class="book-img"><img alt="乖.摸摸头" src="img/book.jpg"></div>
                  <div class="bookName nape">乖.摸摸头</div>
                  <div class="price nape cost">
                    <span>有路价 ￥14.00</span>
                  </div>
                  <div class="priceVip nape cost">
                    <span>VIP价 ￥13.30</span>
                  </div>
                </a></li>
              <li><a href="#">
                  <div class="book-img"><img alt="好吗好的" src="img/book.jpg"></div>
                  <div class="bookName nape">好吗好的</div>
                  <div class="price nape cost">
                    <span>有路价 ￥15.00</span>
                  </div>
                  <div class="priceVip nape cost">
                    <span>VIP价 ￥14.30</span>
                  </div>
                </a></li>
            </ul>
          </div>

          <div class="book-refresh">
            <a class="a_recommend_change" href="#"><span>换一换</span></a>
          </div>
        </div>

        <div class="book-items">
          <div class="item">
            <span class=book_recommend>特色教材</span>
            <span class="left-arrow">大学里受欢迎的书</span>
          </div>

          <div class="bookInfo">
            <ul>
              <li class="bi_li">
                <div class="bi-l">
                  <img src="img/car.jpg" alt="汽车理论(第5版)">
                </div>
                <div class="bi-r">
                  <a href="/#">
                    <div class="name">汽车理论(第5版)</div>
                  </a>
                  <div class="author">余志生</div>
                  <div class="price">
                    <span>有路价：</span>
                    <span>￥14.00</span>
                    <span class="discount">39折</span>
                  </div>
                  <div class="price priceVip">
                    <span>VIP 价：</span>
                    <span class="Vip">
                      ￥13.30
                    </span>
                    <span class="discount">37折</span></div>
                  <div class="price">
                    <span>团购价：</span>
                    <span>
                      ￥11.20
                    </span>
                    <span class="discount">31折</span></div>
                </div>
              </li>
              <li class="bi_li">
                <div class="bi-l">
                  <img src="img/car.jpg" alt="汽车理论(第5版)">
                </div>
                <div class="bi-r">
                  <a href="/#">
                    <div class="name">汽车理论(第5版)</div>
                  </a>
                  <div class="author">余志生</div>
                  <div class="price">
                    <span>有路价：</span>
                    <span>￥14.00</span>
                    <span class="discount">39折</span>
                  </div>
                  <div class="price priceVip">
                    <span>VIP 价：</span>
                    <span class="Vip">
                      ￥13.30
                    </span>
                    <span class="discount">37折</span></div>
                  <div class="price">
                    <span>团购价：</span>
                    <span>
                      ￥11.20
                    </span>
                    <span class="discount">31折</span></div>
                </div>
              </li>
              <li class="bi_li">
                <div class="bi-l">
                  <img src="img/car.jpg" alt="汽车理论(第5版)">
                </div>
                <div class="bi-r">
                  <a href="/#">
                    <div class="name">汽车理论(第5版)</div>
                  </a>
                  <div class="author">余志生</div>
                  <div class="price">
                    <span>有路价：</span>
                    <span>￥14.00</span>
                    <span class="discount">39折</span>
                  </div>
                  <div class="price priceVip">
                    <span>VIP 价：</span>
                    <span class="Vip">
                      ￥13.30
                    </span>
                    <span class="discount">37折</span></div>
                  <div class="price">
                    <span>团购价：</span>
                    <span>
                      ￥11.20
                    </span>
                    <span class="discount">31折</span></div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="footer_nav">
      <div class="footer-tab">
        <a class="footer_nav_a" href="#"><i class="iconfont icon-fangdajing"></i>首页</a>
        <a class="footer_nav_a" href="#"><i class="iconfont icon-fangdajing"></i>我要卖书</a>
        <a class="footer_nav_a" href="#"><i class="iconfont icon-fangdajing"></i>购物车</a>
        <a class="footer_nav_a" href="#"><i class="iconfont icon-fangdajing"></i>我的有路</a>
      </div>
    </div>
  </body>
</html>
